<template>
	<view>
		<navbar top="80rpx"></navbar>
		<view class="container">
			<view class="header-title">
				<!-- <image src="../../static/images/orderTitle.png" mode="widthFix"></image> -->
				<image src="../../../static/images/orderTitle.png" mode="widthFix"></image>
			</view>
			<!-- tab栏 -->
			<view class="header f-28">
				<view @tap.stop.prevent="bindHeaderTap" :class="dataType === 'all' ? 'active' : ''" data-type="all">
					<text>能量获取</text>
				</view>
				<view @tap="bindHeaderTap" :class="dataType === 'payment' ? 'active' : ''" data-type="payment">
					<text>能量消耗</text>
				</view>
				
			</view>
			<view class="header-placeholder"></view>
			<!-- 订单列表 -->
			<scroll-view scroll-y="true" @scrolltolower="addshop" class="goods-detail-box">
				<view class="order-list" v-if="list.length > 0">
					<view class="order" v-for="item in list" :key="item.order_id">
						 <view class="order-time">
						 	{{item.create_time}}
						 </view>
						 <view class="order-warp">
						 	<view class="order-name">
						 		{{item.describe}}
						 	</view>
							<view class="order-number">
								{{item.points}}
							</view>
						 </view>
					</view>
				</view>
				<view v-if="isLoading && list.length <= 0">
					<view class="yoshop-notcont">
						<text class="iconfont icon-wushuju"></text>
						<text class="cont">暂无记录</text>
					</view>
				</view>
				<bottom-safe-area></bottom-safe-area>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/navbar/navbar";
	const app = getApp(); // 枚举类：发货方式
	import {
		isWeixin
	} from '@/utils/verify.js';
	export default {
		components: {
			navbar,
		},
		data() {
			return {
				dataType: 'all', // 列表类型
				// 当前页码
				page: 1,
				isLoading:true,
				hasMore:true,
				list: []
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.getBankList();
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 获取订单列表
		},
		onHide() {
		},
		
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			if (this.hasMore ) {
				this.getBankList();
			}
		},
		methods: {
			addshop(){
				console.log("触底了")
				if (this.hasMore ) {
					this.getBankList()
				}
			},
		bindHeaderTap(e) {
			this.setData({
				dataType: e.currentTarget.dataset.type,
				list:[],
				isLoading: true,
				page: 1,
				// no_more: false
			}); // 获取订单列表
			this.getBankList();
		},
		getBankList() {
			let _this = this
			app._post_form('Jadegoods/getJadeLogList', {
				limit: 10,
				page: _this.page,
				points_state:this.dataType == 'all' ? 1 : 2
			}, function(result) {
				if (1 == result.code) {
				console.log("1111")
					let {
						page,
						list,
						hasMore
					} = _this;
					if (1 == page) {
						list.length = 0;
					}
					
					let {
						total,
						data
					} = result.data.list;
					list = [...list, ...data];
					hasMore = total> list.length;
					if (hasMore) {
						page++;
					}
					_this.setData({
						page,
						list,
						hasMore
					});
				
				}
			}, null, function() {
				
			});
		},
		}
	};
</script>
<style>
	page {
		background:#242424 !important;
	}
</style>
<style lang="scss" scoped>
	.header-title{
		width: 100%;
		height: 38rpx;
		position: fixed;
		top: 0rpx;
		background: #1a1919;
		z-index: 100;
	}
	.header-title image{
		width: 100%;
		height: 100%;
	}
	.header {
		width: 100%;
		height: 94rpx;
		// border-bottom: 1rpx solid #e4e4e4;
		display: flex;
		background: #1a1919;
		line-height: 88rpx;
		position: fixed;
		top: 38rpx;
		color: #FFFFFF ;
		font-size: 30rpx;
		/* top: 44px;
		top: calc(44px + constant(safe-area-inset-top));
		top: calc(44px + env(safe-area-inset-top)); */
		z-index: 100;
	}

	.header-placeholder {
		height: 146rpx;
	}

	.header view {
		flex: 1;
		text-align: center;
		padding: 0 15rpx;
	}

	.header view text {
		display: block;
	}

	.header view.active text {
		// color: $uni-text-color-main;
		color: #CCA754;
		border-bottom: 3rpx solid $uni-border-color-main;
	}

	.order-list {
		padding: 0 40rpx;
	}

	.goods-detail-box {
		height: calc(100vh - 132rpx);
		padding-bottom: 40rpx;
	}

	.order {
		margin-top: 40rpx;
		padding: 20rpx 40rpx 40rpx;
		background-image: url(@/static/images/orderListBg.png);
		background-size: 100% 100%;
		color: #B0B0B0;
		font-size: 26rpx;
		.order-warp{
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 16rpx;
			.order-number{
				font-size: 30rpx;
				font-weight: bold;
				color: #D8B255;
			}
		}
	}

</style>
